<template>
  <div class="app-container">
    <div>
      <div style="display: flex; justify-content: space-between">
        <el-row>
          <el-col>
            <el-button
              type="primary"
              plain
              icon="Plus"
              @click="handleAdd('add')"
              v-hasPermi="['vacation:rule:add']"
              style="margin: 0px 20px 20px 0px"
              >新增假期规则</el-button
            >
          </el-col>
        </el-row>
      </div>
      <el-table
        v-loading="loading"
        :data="postList"
        :default-sort="{ prop: 'name', order: 'descending' }"
      >
        <el-table-column align="center" label="假期名称" prop="name" />
        <el-table-column align="center" label="请假单位">
          <template #default="scope">
            <span>{{ setOption(scope.row.timeUnit) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="计算请假时长方式" align="center">
          <template #default="scope">
            <span>{{ countOption(scope.row.timeCheck) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="余额规则" align="center">
          <template #default="scope">
            <span>{{ ruleOption(scope.row) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="适用范围" width="180" align="center">
          <template #default="scope">
            <span>{{ scopeOption(scope.row.scope) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="handleUpdate('edit', scope.row.id)"
              v-hasPermi="['vacation:rule:edit']"
              >修改</el-button
            >
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['vacation:rule:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加或修班次对话框 -->
      <el-drawer :title="title" v-model="open" direction="rtl">
        <template #default>
          <div>
            <el-form :model="form" :rules="rules" ref="postRef">
              <el-form-item label="规则名称" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入"
                  maxlength="30"
                  show-word-limit
                  style="width: 280px"
                />
              </el-form-item>
              <el-form-item label="应用范围" style="display: flex" prop="scope">
                <el-select
                  v-model="form.scope"
                  placeholder="请选择"
                  style="width: 150px"
                >
                  <el-option
                    v-for="dict in sys_scope_range"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
                <!-- 部分员工隐藏框 -->
                <div v-if="form.scope == 1" style="margin-left: 20px">
                  <select-show
                    v-model:orgList="form.idList"
                    type="org"
                    :showStyle="3"
                    :showTag="false"
                    :disable-select-children-dept="false"
                    :multiple="true"
                  ></select-show>
                </div>
              </el-form-item>

              <el-form-item label="带薪请假">
                <el-select
                  v-model="form.paid"
                  placeholder="请选择"
                  style="width: 280px"
                >
                  <el-option
                    v-for="dict in sys_if_paid_leave"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  />
                </el-select>
                <p
                  style="
                    color: rgba(23, 26, 29, 0.6);
                    font-size: 14px;
                    margin-top: -5px;
                  "
                >
                  若员工请带薪假，将在考勤统计中算出勤
                </p>
              </el-form-item>
              <el-form-item>
                <div>
                  <p
                    style="
                      color: #171a1d;
                      font-size: 14px;
                      font-weight: 500;
                      line-height: 22px;
                      margin-bottom: 8px;
                    "
                  >
                    请假时长核算规则
                  </p>
                  <div
                    style="
                      background-color: rgba(23, 26, 29, 0.04);
                      border: 1px solid rgba(23, 26, 29, 0.04);
                      border-radius: 4px;
                      padding: 20px;
                      min-width: 540px;
                    "
                  >
                    <div style="font-size: 14px">
                      <p
                        style="
                          line-height: 22px;
                          margin-bottom: 8px;
                          margin-top: -10px;
                        "
                      >
                        最小请假单位
                      </p>
                      <el-select
                        v-model="form.timeUnit"
                        placeholder="请选择"
                        style="width: 280px"
                      >
                        <el-option
                          v-for="dict in sys_min_leave_unit"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      <p
                        style="color: rgba(23, 26, 29, 0.6); margin-bottom: 8px"
                      >
                        员工以半天为最小单位选择时间，考勤报表按天统计
                      </p>
                    </div>
                    <div style="font-size: 14px">
                      <p style="line-height: 22px; margin-bottom: 8px">
                        请假时长核算
                      </p>
                      <el-select
                        v-model="form.timeCheck"
                        placeholder="请选择"
                        style="width: 280px"
                      >
                        <el-option
                          v-for="dict in sys_leave_time_account"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                      <p style="color: rgba(23, 26, 29, 0.6)">
                        请假时段中不包含员工的休息日，例如未排班的双休日、法定节假日
                      </p>
                    </div>
                  </div>
                  <el-form-item>
                    <div style="margin-top: 20px; font-size: 14px">
                      设置员工假期余额
                      <el-switch v-model="form.isBalance" />
                    </div>
                  </el-form-item>
                  <!-- 设置员工假期余额隐藏内容 -->
                  <div
                    v-if="form.isBalance == true"
                    style="
                      background-color: rgba(23, 26, 29, 0.04);
                      border: 1px solid rgba(23, 26, 29, 0.04);
                      border-radius: 4px;
                      padding: 20px;
                      width: 100%;
                    "
                  >
                    <el-form-item>
                      <div style="font-size: 14px">
                        <p
                          style="
                            line-height: 22px;
                            margin-bottom: 8px;
                            margin-top: -10px;
                          "
                        >
                          余额发放方式
                        </p>
                        <el-select
                          v-model="form.balanceRuleDto.type"
                          placeholder="请选择"
                          style="width: 280px"
                        >
                          <el-option
                            v-for="dict in sys_bala_distr_method"
                            :key="dict.value"
                            :label="dict.label"
                            :value="dict.value"
                          />
                        </el-select>
                      </div>
                    </el-form-item>
                    <!-- 余额发放方式下拉框根据选择条件显示隐藏内容 -->
                    <el-form-item v-if="form.balanceRuleDto.type == 0">
                      <div style="font-size: 14px">
                        <p style="line-height: 22px; margin-bottom: 8px">
                          发放日期
                        </p>
                        <div>
                          <el-select
                            v-model="form.balanceRuleDto.grantTimeMonthNum"
                            placeholder="请选择"
                            style="width: 280px"
                          >
                            <el-option
                              v-for="dict in sys_year_distr_date"
                              :key="dict.value"
                              :label="dict.label"
                              :value="dict.value"
                            />
                          </el-select>
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item v-if="form.balanceRuleDto.type == 1">
                      <div style="font-size: 14px">
                        <p style="line-height: 22px; margin-bottom: 8px">
                          发放日期
                        </p>
                        <div>
                          <span>每月</span>
                          <el-input-number
                            v-model="form.balanceRuleDto.grantTimeDayNum"
                            :min="1"
                            :max="28"
                            style="width: 80px"
                            controls-position="right"
                          />
                          <span>日发放</span>
                        </div>
                      </div>
                    </el-form-item>
                    <el-form-item>
                      <div style="font-size: 14px">
                        <div>
                          <p style="line-height: 22px; margin-bottom: 8px">
                            额度
                          </p>
                          <span style="margin-right: 10px">每人每年发放</span>
                          <el-input-number
                            v-model="form.balanceRuleDto.grantNum"
                            :min="0"
                            :max="10"
                            controls-position="right"
                            style="width: 80px"
                          />
                          <span>天</span>
                        </div>
                      </div>
                    </el-form-item>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </template>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-drawer>
      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>
<script setup>
// 表格调用接口 addVacationPost是弹窗按钮点击确认调取的接口
import {
  vacationRuleList,
  addVacationPost,
  getVacationPost,
  updateVacationPost,
  delVacationPost,
} from "@/api/vacation/rule";
import { ref, onMounted, reactive } from "vue";
import selectShow from "@/views/flyflow/components/orgselect/selectAndShow.vue";
const { proxy } = getCurrentInstance();
const {
  sys_scope_range,
  sys_if_paid_leave,
  sys_year_distr_date,
  sys_min_leave_unit,
  sys_leave_time_account,
  sys_bala_distr_method,
} = proxy.useDict(
  "sys_scope_range",
  "sys_if_paid_leave",
  "sys_min_leave_unit",
  "sys_leave_time_account",
  "sys_bala_distr_method",
  "sys_year_distr_date"
);
const curModal = ref("");
const postList = ref([]);
const open = ref(false);
const loading = ref(true);
const total = ref(0);
const title = ref("");

onMounted(() => {
  getList();
});

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  rules: {
    name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
  },
});
const form = ref({
  name: "",
  scope: "0",
  isRegularLeave: false, //
  paid: "0",
  timeUnit: "0",
  timeCheck: "0",
  isBalance: false,
  deptIdList: [],
  userIdList: [],
  balanceRuleDto: {
    grantNum: 0,
    grantTimeDayNum: 1,
    grantTimeMonthNum: "1",
    type: "0",
  },
  idList: [],
});
const { queryParams, rules } = toRefs(data);

/** 查询假期规则列表 */
function getList(e) {
  loading.value = true;
  vacationRuleList(queryParams.value)
    .then((response) => {
      postList.value = response.rows;
      total.value = Number(response.total);
      loading.value = false;
    })
    .catch((error) => {
      loading.value = false;
    });
}

/** 取消按钮 */
function cancel() {
  open.value = false;
}

/** 新增按钮操作 */
function handleAdd(type) {
  form.value = {
    name: "",
    scope: "0",
    isRegularLeave: false, //
    paid: "0",
    timeUnit: "0",
    timeCheck: "0",
    isBalance: false,
    deptIdList: [],
    userIdList: [],
    balanceRuleDto: {
      grantNum: 0,
      grantTimeDayNum: 1,
      grantTimeMonthNum: "1",
      type: "0",
    },
    idList: [],
  };
  curModal.value = type;
  open.value = true;
  title.value = "新增假期规则";
}
/** 修改按钮操作 */
function handleUpdate(type, id) {
  getVacationPost(id).then((res) => {
    title.id = res.data.id;
    title.value = res.data.name;
    form.value.id = res.data.id;
    form.value.name = res.data.name;
    form.value.scope = "" + res.data.scope;
    form.value.timeUnit = "" + res.data.timeUnit;
    form.value.timeCheck = "" + res.data.timeCheck;
    form.value.isBalance = res.data.isBalance;
    form.value.balanceRuleDto.grantNum = res.data.balanceRuleDto
      ? res.data.balanceRuleDto.grantNum
      : null;
    form.value.balanceRuleDto.grantTimeDayNum = res.data.balanceRuleDto
      ? res.data.balanceRuleDto.grantTimeDayNum
      : null;
    form.value.balanceRuleDto.grantTimeMonthNum = res.data.balanceRuleDto
      ? res.data.balanceRuleDto.grantTimeMonthNum
      : null;
    form.value.balanceRuleDto.type = res.data.balanceRuleDto
      ? res.data.balanceRuleDto.type
      : null;
  });
  curModal.value = type;
  open.value = true;
}
/** 提交按钮 */
function submitForm() {
  let userList = Object.assign([], form.value.idList);
  delete form.value.idList;
  if (userList) {
    userList.forEach((item) => {
      if (item.type == "dept") {
        form.value.deptIdList.push(item.id);
      } else {
        form.value.userIdList.push(item.id);
      }
    });
  }

  if (curModal.value == "add") {
    addVacationPostApi(form.value);
  } else {
    updateVacationPostApi(form.value);
  }
}

function addVacationPostApi(val) {
  addVacationPost(val).then((res) => {
    open.value = false;
    getList();
  });
}

function updateVacationPostApi(val) {
  updateVacationPost(val).then((res) => {
    proxy.$modal.msgSuccess("修改成功");
    open.value = false;
    getList();
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const idList = row.id;
  proxy.$modal
    .confirm('是否确认删除假期规则为"' + row.name + '"的数据项？')
    .then(function () {
      delVacationPost(idList);
      setTimeout(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
      }, 500);
    });
}

function setOption(val) {
  if (val == 0) {
    return "按天请假";
  } else if (val == 1) {
    return "按半天请假";
  } else {
    return "按小时请假";
  }
}

function countOption(val) {
  if (val == 0) {
    return "按自然日计算请假方式";
  } else {
    return "按工作日计算请假方式";
  }
}

function ruleOption(val) {
  if (val.isBalance == true) {
    if (val.balanceRuleVo.grantTimeDayNum == 1) {
      return `每年1月1日, ${val.balanceRuleVo.grantNum}天`;
    }
    if (val.balanceRuleVo.grantTimeMonthNum == 1) {
      return `${val.balanceRuleVo.grantTimeMonthNum}, ${val.balanceRuleVo.grantNum}天`;
    }
  } else {
    return "不限制余额";
  }
}

function scopeOption(val) {
  if (val == 0) {
    return "全公司";
  } else {
    return "部门/人员";
  }
}

getList();
</script>
<style scoped>
.el-form-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
:deep(.el-drawer__header) {
  border-bottom: 1px solid gainsboro;
  height: 60px;
  margin-bottom: -5px;
}
.treeMain {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  min-height: 300px;
}
.treeClass {
  width: 50%;
  height: 100%;
}
.clickChange {
  width: 50%;
  min-height: 300px;
  box-sizing: border-box;
  border-left: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  padding: 0px 10px 0 10px;
}
.isCheckUserListClass {
  min-width: 50px;
  min-height: 30px;
  border: 1px solid #ccc;
  border-radius: 5px 5px;
  margin-bottom: 5px;
  margin-right: 10px;
}
</style>
